*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: 'Jost', sans-serif;
}
body {
    background: #333;
}
h1 {
    text-align: center;
    padding: 240px 0;
    color: #033c86;;
}
.box-timeline {
    width: 100%;
    height: 1979px;
    background: #293358;
    position: relative;
    padding: 80px 0 250px 0;
    margin-bottom: 100px;
}
/*augmenter la taille de la ligne*/
.ligne {
    height: 1300px;
    width: 8px;
    margin: 0 auto;
    background: #333;
}

.rond {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #333;
    position: absolute;
    border: 1px solid #000;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
}
/* 1000 - 160 + 80 / 3 =~ 306 */
/* pour ajouter un imoji*/
.r1{top: 80px;}
.r2{top: 386px;}
.r3{top: 692px;}
.r4{top: 1000px;}
.r5{top: 1300px;}


.box {
    color: #333;
    width: 400px;
    min-height: 200px;
    padding: 20px;
    border-radius: 3px;
    height: auto;
    background: #f1f1f1;
    box-shadow: 0 10px 15px rgba(0,0,0,0.5);
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

.b1 {
    top: 10px;
    left: calc(50% - 270px);
}
.b2 {
    top: 482px;
    left: calc(50% + 270px);
}
.b3 {
    top: 971px;
    left: calc(50% - 270px);
}
.b4 {
    top: 1460px;
    left: calc(50% + 270px);
}

.box p {
    line-height: 20px;
    font-size: 18px;
    margin: 10px 0 20px 0;
}
.btn {
    display: block;
    background: midnightblue;
    padding: 0px;
    width: 120px;
    text-align: center;
    color: #f1f1f1;
    text-decoration: none;
    border-radius: 3px;
    margin-top: 10px;
}

@media screen and (max-width: 1000px) {

    .ligne {
        position: relative;
        left: 200px;
    }
    .rond {
        left: calc(50% + 200px);
    }
    .box {
        left: calc(50% - 50px)
    }

}
@media only screen and (min-device-width : 414px) and (max-device-width : 896px) and (-webkit-device-pixel-ratio : 2) and (orientation : portrait) {
.b1{
    top: 28px;
}
.b2{
    top: 529px;
}
.b3{
    top: 1032px;
}
.b4{
    top: 1508px;
}

.box {
    left: calc(50% - 13px);
    width: 320px;
    min-height: 197px;
    padding: 9px;

}

}